<template>
    <div class="app_container">
        <div class="main_container">
            <div class="header_container">
                <div class="nav">
                    <router-link to="/home">
                        <img src="./images/logo.png" alt="职业网">
                    </router-link>
                    <ul>
                        <li><router-link to="/home">首页</router-link></li>
                        <li><router-link to="/read">阅读</router-link></li>
                        <li><router-link to="/radio">电台</router-link></li>
                        <li><router-link to="/zixun">资讯</router-link></li>
                        <li><router-link to="/about">关于</router-link></li>
                    </ul>
                    <ul class="nav-right">
                        <!-- <li><a href="#" @click='loginEvent'> 登陆 </a> / <a href="#" @click='resetEvent'> 注册 </a></li> -->
                        <li><a @click="jumpPage">进入网校</a></li>
                    </ul>
                </div>
            </div>

            <router-view></router-view>

            <div class="footer_container">
                <div class="img">
                    <img src="./images/footerBgc.png" alt="">
                    <div>
                        <h3>关于我们</h3>
                        <p>
                            <span>兴职网隶属于中财建讯（北京）教育科技有限公司。作为中国教育事业变革力量企业</span><br>
                            <span>之一，响应国家对教育事业高质量的要求，紧紧围绕提高教育质量这</span><br>
                            <span>一战略主题，致力于打造更高学习效率提升学员职业价值的产品, 培训出更多高级职业资格类人才。</span>
                        </p>
                        <h3>企业文化</h3>
                        <p>
                            <span><b>愿景：</b>做中国最高效学习方式提升用户职业价值的产品和服务商。</span><br>
                            <span><b>使命：</b>致力作出高质量的教育服务和变革性的体验方式，不断提升用户职业生涯</span><br>
                            <span>价值的服务平台，助力于全社会的职业工作者素质的提升。</span>
                        </p>
                    </div>
                </div>
                <div class="botMsg">
                    <span>Copyright@2018 中财建讯(北京)教育科技有限公司 版权所有 京ICP备18004165号</span>
                </div>
            </div>
        </div>
        <!-- 遮挡层 -->
        <div id="maskey" v-show="maskeyFlag"></div>
        <!-- 登录弹框 -->
        <div id="loginPage" class="loginInfo" v-show="loginFlag">
            <h1><span @click="closeView"></span></h1>
            <h2>登录开始您的学习之旅</h2>
            <ul>
                <li class="input-group">
                    <a class="input-group-addon ">
                        <span class="user"></span>
                    </a>
                    <input type="text" class="form-control" placeholder="请输入您的手机号码" >
                </li>
                <li class="input-group">
                    <a class="input-group-addon ">
                        <span class="passWord"></span>
                    </a>
                    <input type="password" class="form-control" placeholder="请输入您的密码" >
                </li>
                <li>
                    <label>
                        <input type="checkbox"> 记住我
                    </label>
                </li>
                <li>
                    <button class="btn btn-info">登&nbsp;录</button>
                </li>
                <li class="last">
                    还没有账号？马上<a href="#" @click="loginToReset">注册</a>
                </li>
            </ul>
        </div>
        <!-- 注册弹框 -->
        <div id="resetPage" class="loginInfo" v-show="resetFlag">
            <h1><span @click="closeView"></span></h1>
            <h2>注册开始您的学习之旅</h2>
            <ul>
                <li class="input-group">
                    <a class="input-group-addon ">
                        <span class="user"></span>
                    </a>
                    <input type="text" class="form-control" placeholder="请输入您的手机号码" >
                </li>
                <li class="input-group">
                    <a class="input-group-addon ">
                        <span class="passWord"></span>
                    </a>
                    <input type="password" class="form-control" placeholder="请输入您的密码" >
                </li>
                <li class="input-group">
                    <a class="input-group-addon ">
                        <span class="passWord"></span>
                    </a>
                    <input type="password" class="form-control yanzheng" placeholder="请输入您的验证码" >
                    <button class="btn btn-yanzheng">获取验证码</button>
                </li>
                <li class="xieyi">
                    <label>
                        <input type="checkbox" checked> 我同意注册协议
                    </label>
                    <a href="javascript:;">忘记密码？</a>
                </li>
                <li>
                    <button class="btn btn-info">注&nbsp;册</button>
                </li>
                <li class="last">
                    已有账号？马上<a href="#" @click="resetToLogin">登录</a>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            maskeyFlag:false,
            loginFlag:false,
            resetFlag:false,
        }
    },
    created(){
        this.windowKeyup();
    },
    methods:{
        jumpPage(){
            window.open('http://jiaoshi.xzwedu.com','_blank'); 
        },
        windowKeyup(){
            var _this = this;
            document.onkeyup = function(e){
                var e = e || window.event || arguments.callee.call.arguments[0];
                if(e && e.keyCode === 27){
                    _this.closeView();
                }
            }
        },
        closeView(){
            this.maskeyFlag = false;
            this.resetFlag = false;
            this.loginFlag = false;
        },
        loginEvent(){
            this.maskeyFlag = true;
            this.loginFlag = true;
        },
        resetEvent(){
            this.maskeyFlag = true;
            this.resetFlag = true;
        },
        resetToLogin(){
            this.resetFlag = false;
            this.loginFlag = true;
        },
        loginToReset(){
            this.resetFlag = true;
            this.loginFlag = false;
        }
    }
}
</script>

<style lang="less" scoped>
    .app_container {
        min-width:1050px;
        width:100%;
        height:100%;

        #maskey {
            position:absolute;
            left:0;
            top:0;
            height:100%;
            width:100%;
            background-color: rgba(0,0,0,0.5);
        }


        .loginInfo {
            position: absolute;
            top:100px;
            left:50%;
            width:400px;
            margin-left: -200px;
            background-color:#fff;
            z-index: 9;
            border-radius: 8px;
            box-shadow: 0 0 30px #151515;


            h1 {
                height:68px;

                span {
                    float:right;
                    display: block;
                    height:20px;
                    width:20px;
                    margin-top:10px;
                    margin-right: 10px;
                    cursor: pointer;
                    background: url("./images/icon/close.png") center;
                    background-size: cover;
                    opacity: 0.8;
                }

                span:hover {
                    opacity: 1;
                }
            }

            h2 {
                text-align: center;
                margin-bottom: 50px;
                color: #efb10b;
                font-size: 28px;
            }

            ul {
                width:300px;
                margin:0 auto 50px;

                li {
                    margin-bottom: 16px;

                    input[type='text'], input[type='password'] {
                        height:40px;
                    }

                    input.yanzheng {
                        width: 150px;
                        margin-right: 8px;
                        border-radius: 0 5px 5px 0;
                    }

                    button.btn-yanzheng {
                        width: 100px;
                        height: 40px;
                        line-height: 28px;
                        background: rgba(239,177,11,1);
                        color:#fff;
                    }

                    span.user {
                        background: url("./images/icon/phone.png") no-repeat center;
                        background-size: contain;

                        display: block;
                        height: 25px;
                        width: 16px;
                    }

                    span.passWord {
                        background: url("./images/icon/lock.png") no-repeat center;
                        background-size: contain;
                        display: block;
                        height: 25px;
                        width: 16px;
                    }

                    label {
                        margin-top: -5px;
                        font-size: 12px;
                        font-weight: 400;
                        color: #a5a5a5;
                        margin-bottom: 0;
                        display: block;

                        input {
                            vertical-align: middle;
                            margin:-2px 0 0;
                        }
                    }

                    .btn {
                        width:100%;
                    }
                }

                li.xieyi {
                    margin-bottom:8px;

                    label {
                        margin-top:20px;
                        display: inline-block;
                    }

                    a {
                        float:right;
                        margin-top: 20px;
                        font-size: 12px;
                        color:rgba(239,177,11,1);
                    }
                }

                li.last {
                    color:#555;
                    font-size: 12px;

                    a {
                        color:rgba(239,177,11,1);
                    }
                }
            }
        }

        .main_container {
            height:100%;
            width:100%;
            overflow: auto;
            position:relative;

            .header_container {
                width:100%;
                min-width:1050px;
                background:rgba(94,102,119,1);

                .nav {
                    height:50px;
                    width:1000px;
                    margin:0 auto;

                    img {
                        height:30px;
                        margin-top:10px;
                        float:left;
                    }

                    ul {
                        float:left;
                        overflow: hidden;
                        margin-left: 10%;
                        width:50%;
                        
                        li {
                            float:left;
                            line-height: 50px;
                            width:20%;
                            text-align:center;
                        }
                        a {
                            color:#fff;
                        }
                        a:hover,a.router-link-active  {
                            color:rgba(239,177,11,1);
                        }
                    }
                    ul.nav-right {
                        float:right;
                        margin:0;
                        width:auto;

                        li {
                            width:100px;
                            color:#fff;
                        }

                        a {
                            cursor: pointer;
                        }
                    }
                }

            }

            .footer_container {
                margin-top: 40px;

                .botMsg {
                    line-height: 30px;
                    text-align: center;
                    font-size: 12px;
                    background-color:#333;
                    color:#d8d8d8;
                }

                .img {
                    position: relative;
                    height: 289px;

                    img {
                        width:100%;
                        height:100%;
                    }

                    div {
                        position: absolute;
                        left: 0;
                        top: 0;
                        height:100%;
                        width:100%;
                        background-color:#000;
                        opacity: 0.5;
                    }

                    h3 {
                        line-height: 30px;
                        text-align: center;
                        margin-top:20px;
                        color:#fff;
                        font-size: 20px;
                    }
                    p {
                        text-align: center;
                        line-height: 28px;
                        color:#c1c1c1;
                        font-size: 12px;
                    }
                }
            }
        }
    }
</style>
